<template>
    <article>
        <header>时间线</header>
        <section>
            <header>颜色</header>
            <div class="container">
                <cv-timeline :data="data" c="timeline default medium"></cv-timeline>
                <cv-timeline :data="data" c="timeline primary medium"></cv-timeline>
                <cv-timeline :data="data" c="timeline success medium"></cv-timeline>
                <cv-timeline :data="data" c="timeline warn medium"></cv-timeline>
                <cv-timeline :data="data" c="timeline error medium"></cv-timeline>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleTimeline",
        data() {
            return {
                data: [{
                    name: "创建成功",
                    time: new Date(2022, 5, 1, 1, 2, 3)
                }, {
                    name: "创建成功",
                    time: new Date()
                }, {
                    name: "创建成功",
                    time: new Date(),
                    level: "warn"
                }, {
                    name: "创建成功",
                    time: new Date(),
                    level: "success"
                }, {
                    name: "创建成功",
                    time: new Date(),
                    level: "primary"
                }]
            };
        }
    };
</script>

<style scoped lang="scss">
    .container {
        display: flex;
        flex-wrap: wrap;
        
        .timeline {
            margin-right: 100px;
        }
    }
</style>
